<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>key的原理</title>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <!-- v-for 遍历数组 (常用)-->
      <h2>人员列表(遍历数组)</h2>
      <button @click.once="add">添加一个老刘</button>
      <!-- .once 事件修饰符：只能执行一次 -->
      <ul>
        <!-- <li v-for="(p,index) of persons" :key="index"> 点击添加老刘页面会发生错乱-->
        <li v-for="(p,index) of persons" :key="p.id">
          <!--点击添加老刘页面不会发生错乱-->
          {{p.name}}-{{p.age}}
          <input type="text" /> <!--存在输入类DOM-->
        </li>
      </ul>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data() {
        return {
          persons: [
            { id: "001", name: "张三", age: "18" },
            { id: "002", name: "李四", age: "19" },
            { id: "003", name: "王二狗", age: "20" },
          ],
        };
      },
      methods: {
        add() {
          this.persons.unshift({ id: "004", name: "老刘", age: "38" });
        },
      },
    });
  </script>
</html>
